<template>
  <div>
    <button @click="show1()">弹出服务活动</button>
    <button @click="show2()">弹出维修组合</button>
    <button @click="show3()">弹出投诉页面</button>
    <Drawer :visible.sync="isshow1" title="服务活动" destroyOnClose :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
      <Activity @close1="closeHandler1" />
    </Drawer>
    <Drawer :visible.sync="isshow2" title="维修组合" destroyOnClose :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
      <Repcombination @close2="closeHandler2" />
    </Drawer>
    <Drawer :visible.sync="isshow3" title="投诉历史" destroyOnClose :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
      <Complaint @close3="closeHandler3" />
    </Drawer>
  </div>
</template>
<script>
import Activity from './activity.vue';
import Repcombination from './Repcombination.vue';
import Complaint from './complaint.vue';
export default {
  components: {
    Activity,
    Repcombination,
    Complaint
  },
  data() {
    return {
      isshow1: false,
      isshow2: false,
      isshow3: false,
      data: {}
    };
  },
  methods: {
    show1() {
      this.isshow1 = true;
    },
    show2() {
      this.isshow2 = true;
    },
    show3() {
      this.isshow3 = true;
    },
    closeHandler1(val) {
      this.isshow1 = val;
    },
    closeHandler2(val) {
      this.isshow2 = val;
    },
    closeHandler3(val) {
      this.isshow3 = val;
    }
  }
};
</script>
